<template>
  <div class="tasks-container">
    <div class="tasks-header">
      <h2>我的任务</h2>
      <el-button type="primary" size="small" @click="addTask">新建任务</el-button>
    </div>
    
    <div class="tasks-list">
      <el-card 
        v-for="task in tasks" 
        :key="task.id" 
        class="task-card"
        shadow="hover"
      >
        <div class="task-content">
          <div class="task-info">
            <h3>{{ task.title }}</h3>
            <p>{{ task.description }}</p>
            <div class="task-meta">
              <el-tag :type="task.status === '进行中' ? 'warning' : task.status === '已完成' ? 'success' : 'info'" size="small">
                {{ task.status }}
              </el-tag>
              <span class="task-date">{{ task.date }}</span>
            </div>
          </div>
          <div class="task-actions">
            <el-button size="small" @click="editTask(task)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteTask(task.id)">删除</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tasks = ref([
  {
    id: 1,
    title: '完成项目文档',
    description: '编写项目技术文档和用户手册',
    status: '进行中',
    date: '2024-01-15'
  },
  {
    id: 2,
    title: '代码审查',
    description: '对团队提交的代码进行审查',
    status: '待处理',
    date: '2024-01-16'
  },
  {
    id: 3,
    title: '系统测试',
    description: '进行系统功能测试和性能测试',
    status: '已完成',
    date: '2024-01-14'
  }
])

const addTask = () => {
  // 添加任务逻辑
  console.log('添加任务')
}

const editTask = (task) => {
  // 编辑任务逻辑
  console.log('编辑任务', task)
}

const deleteTask = (taskId) => {
  // 删除任务逻辑
  tasks.value = tasks.value.filter(task => task.id !== taskId)
}
</script>

<style scoped>
.tasks-container {
  padding: 0;
}

.tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid #eee;
}

.tasks-header h2 {
  margin: 0;
  color: #333;
  font-size: 1.5em;
  font-weight: 600;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-card {
  border-radius: 12px;
  transition: all 0.3s ease;
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.task-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.task-info {
  flex: 1;
}

.task-info h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 1.1em;
  font-weight: 600;
}

.task-info p {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 0.95em;
  line-height: 1.4;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.task-date {
  color: #999;
  font-size: 0.9em;
}

.task-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* 移动端优化 */
@media (max-width: 600px) {
  .tasks-header {
    margin-bottom: 16px;
    padding: 0 0 12px 0;
  }
  
  .tasks-header h2 {
    font-size: 1.3em;
  }
  
  .tasks-list {
    gap: 10px;
  }
  
  .task-content {
    gap: 12px;
  }
  
  .task-info h3 {
    font-size: 1em;
  }
  
  .task-info p {
    font-size: 0.9em;
    margin-bottom: 10px;
  }
  
  .task-meta {
    gap: 8px;
  }
  
  .task-date {
    font-size: 0.85em;
  }
  
  .task-actions {
    gap: 6px;
  }
  
  .task-actions .el-button {
    font-size: 0.85em;
    padding: 6px 10px;
  }
}

@media (max-width: 375px) {
  .tasks-header {
    margin-bottom: 12px;
    padding: 0 0 10px 0;
  }
  
  .tasks-header h2 {
    font-size: 1.2em;
  }
  
  .tasks-list {
    gap: 8px;
  }
  
  .task-content {
    gap: 8px;
  }
  
  .task-info h3 {
    font-size: 0.95em;
  }
  
  .task-info p {
    font-size: 0.85em;
    margin-bottom: 8px;
  }
  
  .task-meta {
    gap: 6px;
  }
  
  .task-date {
    font-size: 0.8em;
  }
  
  .task-actions {
    gap: 4px;
  }
  
  .task-actions .el-button {
    font-size: 0.8em;
    padding: 4px 8px;
  }
}
</style> 